<?php
function bzg_slides_control() {
	global $wpdb;
	wp_enqueue_media();
	echo '<link rel="stylesheet" href="' . get_theme_file_uri('/assets/css/admin.css') . '" type="text/css" media="all">';
	echo '<div class="mywrap" id="slides">';

	$slides = get_option('slides');
	$slides = $slides ? json_decode($slides, true) : array();
	//保存
	if(isset($_POST['action']) && 'save' == $_POST['action']) {
		unset($_POST['action']);
		if(!empty($_POST)) {
			$slides = array();
			foreach($_POST as $key=>$val) {
				$split = explode('_', $key);
				$slides[$split[1]][$split[0]] = esc_url_raw($val);
			}
			function bzg_filter_noimg($arr) {
				return $arr['img'];
			}
			$slides = array_filter($slides, 'bzg_filter_noimg');
			update_option('slides', json_encode($slides));
			echo '<div class="notice is-dismissible updated">保存设置成功！</div>';
		}
	}
	//删除
	if(isset($_GET['action']) && 'delete' == $_GET['action']) {
		$attachid = (int) $_GET['attachid'];
		unset($slides[$attachid]);
		update_option('slides', json_encode($slides));
		echo '<div class="notice is-dismissible updated">删除幻灯片成功！</div>';
	}
	//新增
	if(isset($_POST['action']) && 'add' == $_POST['action']) {
		$data[0] = array(
			'img'=> esc_url_raw($_POST['img']),
			'link' => esc_url_raw($_POST['link']),
		);
		if($data[0]['img']) {
			$slides = wp_parse_args($data, $slides);
			update_option('slides', json_encode($slides));
			echo '<div class="notice is-dismissible updated">新增幻灯片成功！</div>';
		} else {
			echo '<div class="notice is-dismissible error">图片不能为空！</div>';
		}
	}

?>
<form id="slidelist" method="post" action="<?php echo admin_url('admin.php?page=slides'); ?>">
	<table class="wp-list-table widefat fixed striped">
		<thead>
			<tr>
				<th scope="col" class="manage-column column-primary" width="40%">图片</th>
				<th scope="col" class="manage-column" width="40%">链接</th>
				<th scope="col" class="manage-column">操作</th>
			</tr>
		</thead>
		<tbody>
		<?php
			if($slides) {
				foreach($slides as $key=>$slide) {
					$slide['img'] = esc_url($slide['img']);
					$slide['link'] = esc_url($slide['link']);
					echo '<tr>';
					echo '<td class="column-primary" data-colname="图片" width="40%">
						<img class="slide-preview" src="' . $slide['img'] . '">
						<input class="upfile" type="file" accept="image/jpeg,image/gif,image/png,image/webp">
						<button type="button" class="toggle-row"></button>
						<input class="attach" type="hidden" name="img_' . $key . '" value="' . $slide['img'] . '">
						</td>';
					echo '<td data-colname="链接" width="40%">
						<input type="text" name="link_' . $key . '" value="' . $slide['link'] . '" class="large-text">
						</td>';
					echo '<td data-colname="操作">
						<input type="button" class="button delete" data-id="' . $key . '" value="删除">
						<input type="button" class="button up" value="&uarr;">
						<input type="button" class="button down" value="&darr;">
						</td>';
					echo '</tr>';
				}
				echo '<tr>
					<td colspan="3">
						<br>
						<p><input type="submit" class="button-primary" value="保存设置"></p>
						<input type="hidden" name="action" value="save">
					</td>
				</tr>';
			}
		?>
		</tbody>
	</table>
</form>

<form id="addslide" method="post" action="<?php echo admin_url('admin.php?page=slides'); ?>">
	<table class="wp-list-table widefat fixed striped">
		<tr>
			<td class="column-primary" data-colname="图片" width="40%">
				<img class="slide-preview" src="" style="display: none;">
				<input class="upfile" type="file" accept="image/jpeg,image/gif,image/png,image/webp">
				<button type="button" class="toggle-row"></button>
				<input class="attach" type="hidden" name="img" value="">
			</td>
			<td data-colname="链接" width="40%"><input type="text" name="link" value="" class="large-text"></td>
			<td data-colname="操作">
				<input type="submit" class="button-primary" value="添加">
				<input type="hidden" name="action" value="add">
			</td>
		</tr>
	</table>
</form>

<script type="text/javascript">
	jQuery(document).ready(function(){
		//上传图片
		var bzg_upload_frame, target_field, target_img;
		jQuery(".upfile").click(function(event) {
			event.preventDefault();
			var elm = jQuery(this);
			var parent = elm.parent();
			target_field = parent.find(".attach");
			target_img = parent.find(".slide-preview");
			
			if(bzg_upload_frame) {
				bzg_upload_frame.open();
				return;
			}
			bzg_upload_frame = wp.media({
				title: "上传图片",
				button: {
					text: "插入",
				},
				multiple: false
			});
			bzg_upload_frame.on("select", function() {
				var attachment = bzg_upload_frame.state().get("selection").first().toJSON();
				target_field.val(attachment.url);
				target_img.attr("src", attachment.url).hide().fadeIn("slow");
			});

			bzg_upload_frame.open();
		});
		//删除图片
		jQuery(".delete").click(function(event) {
			event.preventDefault();
			var attachid = jQuery(this).data("id");
			window.location.href = "<?php echo admin_url('admin.php?page=slides&action=delete&attachid='); ?>" + attachid;
		});
		//向上移动
		jQuery("#slidelist").on("click", ".up", function(event) {
			event.preventDefault();
			var tr = jQuery(this).parent().parent();
			if(tr.prev().size() == 0) return false;
			var html = "<tr>" + tr.html() + "</tr>";
			tr.prev().before(html);
			tr.remove();
		});
		//向下移动
		jQuery("#slidelist").on("click", ".down", function(event) {
			event.preventDefault();
			var tr = jQuery(this).parent().parent();
			if(tr.nextAll().size() < 2) return false;
			var html = "<tr>" + tr.html() + "</tr>";
			tr.next().after(html);
			tr.remove();
		});
	});
</script>
</div>
<?php
}
?>